<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>滚动字幕</title>
</head>
<style>
    #affiche {
        color: red;
        display: block;
        width: 70%;
        height: 30px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .affiche_text {
        position: absolute;
        top: 0;
        left: 100%;
        line-height: 30px;
        display: block;
        word-break: keep-all;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

<div id="affiche">
    <span class="affiche_text">字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~</span>
</div> 

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
    (function () { var timer = setTimeout(this.marquee, 5000); }());
    function marquee() {
        var scrollWidth = $('#affiche').width();
        var textWidth = $('.affiche_text').width();
        var i = scrollWidth;
        setInterval(function () {
            i--;
            if (i < -textWidth) {
                i = scrollWidth;
            }
            $('.affiche_text').animate({ 'left': i + 'px' }, 20);
        }, 20);
    }
</script>

</html>